<template>
  <div>
    <template v-for="item in tree" :key="item.path">
      <!-- 一级菜单 -->
      <el-menu-item
        :class="{ 'active-item': $route.name === item.name }"
        v-if="fn(item)"
        :index="item.path"
      >
        <el-badge :value="unreadMsg" :hidden="item.meta.icon !== 'ForkSpoon' || unreadMsg == 0">
          <font-icon :iconName="item.meta.icon" />
        </el-badge>
        <template #title>
          <span>{{ item.meta.title }}</span>
        </template>
      </el-menu-item>
      <!-- 二级菜单 -->
      <el-sub-menu v-else :index="item.path">
        <template #title>
          <font-icon :iconName="item.meta.icon" />
          <span>{{ item.meta.title }}</span>
        </template>
        <SideItem :tree="item.children" />
      </el-sub-menu>
    </template>
  </div>
</template>

<script setup>
import { computed, toRefs } from "vue";
import { useState } from "@/utils/hooks/useMapper";
import { useStore } from "vuex";
import { useRoute, useRouter } from "vue-router";

const props = defineProps({
  tree: {
    type: Object,
    required: true,
  },
  hidden: {
    type: Boolean,
    default: true,
  },
});
const { tree } = toRefs(props);

const { unreadMsg } = useState({
  unreadMsg: (state) => state.conversation.totalUnreadMsg,
});

const fn = (item) => {
  return !item.children || item.children.length === 0;
};
</script>

<style lang="scss" scoped></style>
